// menu 开头代表是一级菜单的样式，sub 开头代表是二级菜单的样式，除了 menuText，menuText 是整个菜单的文字样式，即包含了 sub 的文字样式。
$sideMenuWidth: 210px;
// 暗色主题，默认
$menuBg-dark: #304156;
$menuHover-dark: #263445;
$menuText-dark: #BFCBD9;
$menuActiveText-dark: #409EFF;
$menuLogo-dark: #001529;
$subMenuBg-dark: #1F2D3D;
$subMenuHover-dark: #001528;
$subMenuActiveText-dark: #409EFF;
$elIcon-dark: #BFCbd9;
$svgIcon-dark: #BFCbd9;

// 白色主题
$menuBg-light: #FFF;
$menuHover-light: #ECF5FF;
$menuText-light: #303133;
$menuActiveText-light: #409EFF;
$menuLogo-light: #168BF7;
$subMenuBg-light: #FFF;
$subMenuHover-light: #ECF5FF;
$subMenuActiveText-light: #409EFF;
$elIcon-light: #909399;
$svgIcon-light: #909399;

// The :export directive is the magic sauce for webpack
// https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
:export {
  // 默认，暗色主题
  menuDarkBg: $menuBg-dark;
  menuDarkHover: $menuHover-dark;
  menuDarkText: $menuText-dark;
  menuDarkActiveText: $menuActiveText-dark;
  menuLogoDark: $menuLogo-dark;
  subMenuDarkBg: $subMenuBg-dark;
  subMenuDarkHover: $subMenuHover-dark;
  subMenuDarkActiveText: $subMenuActiveText-dark;
  elIconDark: $elIcon-dark;
  svgIconDark: $svgIcon-dark;
  // 白色主题
  menuLightBg: $menuBg-light;
  menuLightHover: $menuHover-light;
  menuLightText: $menuText-light;
  menuLightActiveText: $menuActiveText-light;
  menuLogoLight: $menuLogo-light;
  subMenuLightBg: $subMenuBg-light;
  subMenuLightHover: $subMenuHover-light;
  subMenuLightActiveText: $subMenuActiveText-light;
  elIconLight: $elIcon-light;
  svgIconLight: $svgIcon-light;
}
